<template>
  <div>
    <div class="jd-head">
      <div class="back" @click="back1"><span class="iconfont">&#xe664;</span></div>
      <div class="titl">
        <a>购物车</a>
      </div>
      <div class="more">
        <span @click="edit">{{editText}}</span>
      </div>
    </div>
    <div class="jd-cart">
      <div class="item" v-for="(item1, index) in gooodsList" :key="item1.id">
        <a class="icon">
          <i class="iconfont icon-xuanzhong" @click="selected(index)" :class="{'icon-xuanzhong1': item1.check }"></i>
        </a>
        <a class="goodsimg"><img :src="item1.imgurl" alt=""></a>
        <div class="conts">
          <span class="goodstxt">
            <a>{{item1.text}}</a>
          </span>
          <span class="price">￥{{item1.price}}</span>
          <a class="fix">
            <span class="add" @click="changeNum(-1,index)"></span><input type="text" disabled :value="item1.num"><span class="desc" @click="changeNum(1,index)"></span>
          </a>
        </div>
      </div>
    </div>
    <div class="fixbar">
      <a class="icon">
        <i class="iconfont icon-xuanzhong selall" @click="checkall()" :class="{'icon-xuanzhong1': art}"></i>
        <div>全选</div>
      </a>
      <a class="detail" :class="{'hide': detailsh}" @click="delete1">删除</a>
      <div class="rightf">
        <span class="total">总计：<i>￥{{totalMoney}}</i></span>
        <span class="check">去结算</span>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'ShopCart',
  data () {
    return {
      art: false,
      detailsh: true,
      editText: '编辑',
      totalMoney: '0'
      // gooodsList: [{
      //   id: '001',
      //   price: '1685',
      //   imgurl: '//img10.360buyimg.com/mobilecms/s117x117_jfs/t19120/94/2650328332/104809/b1b37ad7/5b022af9N667f2364.jpg!q70.dpg.webp',
      //   text: '索尼（SONY）MDR-1AM2 Hi-Res高解析度立体声耳机 银色',
      //   num: '1',
      //   check: false
      // }, {
      //   id: '002',
      //   price: '3800',
      //   imgurl: '//img10.360buyimg.com/mobilecms/s168x168_jfs/t19867/57/859856413/138688/dc59cde5/5b0d2135Ne2592892.jpg!q70.dpg.webp',
      //   text: '百草味 香辣猪脚肘子卤味熟食零食小吃   香辣味香卤猪蹄150g/袋',
      //   num: '1',
      //   check: false
      // }, {
      //   id: '003',
      //   price: '514',
      //   imgurl: '//img10.360buyimg.com/mobilecms/s168x168_jfs/t8629/336/437436137/182283/c1f4e0e1/59a7ce53N46ccee92.jpg!q70.dpg.webp',
      //   text: 'Onitsuka Tiger 运动休闲鞋 男女 TIGER ALLY D701L-0707 蓝绿色/蓝绿色 43.5',
      //   num: '1',
      //   check: false
      // }]
    }
  },
  computed: ({
    ...mapState(['gooodsList'])
  }),
  methods: {
    back1 () {
      this.$router.back(-1)
    },
    changeNum (a, b) {
      if (a > 0) {
        this.gooodsList[b].num++
      } else {
        this.gooodsList[b].num--
        if (this.gooodsList[b].num < 1) {
          this.gooodsList[b].num = 1
        }
      }
      this.calcTotalPrice()
    },
    selected (a) {
      this.gooodsList[a].check = !this.gooodsList[a].check
      this.calcTotalPrice()
    },
    checkall () {
      this.art = !this.art
      this.gooodsList.forEach((item, i) => {
        if (this.art === true) {
          this.gooodsList[i].check = true
        } else {
          this.gooodsList[i].check = false
        }
      })
      this.calcTotalPrice()
    },
    calcTotalPrice () {
      this.totalMoney = 0
      this.gooodsList.forEach((item, i) => {
        if (item.check === true) {
          this.totalMoney += item.num * item.price
        }
      })
    },
    edit () {
      this.detailsh = !this.detailsh
      if (this.detailsh === true) {
        this.editText = '编辑'
      } else {
        this.editText = '完成'
      }
      this.gooodsList.forEach((item, i) => {
        this.gooodsList[i].check = false// 移除选中状态
      })
      this.art = false// 移除选中状态
    },
    delete1 () {
      this.gooodsList.forEach((item, i) => {
        if (item.check === true) {
          this.gooodsList.splice(i, this.gooodsList.length)
        }
      })
      this.calcTotalPrice()
    }
  }
}
</script>

<style lang="stylus" scoped>
  .jd-head
    font-size .3rem
    color #252525
    min-height 44px
    background #fff
    width 100%
    border-bottom 1px solid #e5e5e5
    .back
      position absolute
      width 40px
      height 44px
      line-height 44px
      text-align center
    .back .iconfont
      font-size .36rem
      font-weight bold
      color #333
    .titl
      line-height 44px
      margin 0 70px
      display flex
      display -webkit-box
      display -webkit-flex
    .titl a
      flex 1
      -webkit-box-flex: 1
      -webkit-flex: 1
      text-align center
      color #252525
      font-size .28rem
    .titl a.act
      color #e4393c
    .more
      overflow hidden
      position absolute
      top 0
      right 0
      width 40px
      height 44px
      line-height 44px
      text-align center
    .more span
      font-size .26rem
      color #333
  .jd-cart
    margin-bottom 50px
  .item
    font-size 0
    overflow hidden
    padding-top 10px
    padding-bottom 10px
    border-bottom 1px solid #e5e5e5
  .icon
    width 40px
    text-align center
    display inline-block
  .icon i
    font-size 18px
    color #666
  .icon .icon-xuanzhong1
    color #e4393c
  .goodsimg img
    width 75px
  .conts
    width calc(100% - 125px)
    display inline-block
  .goodstxt
    font-size .24rem
    width 100%
    display inline-block
    margin-left 5px
    // height: 30px
  .goodstxt a
    color #333
    word-break break-all
    overflow hidden
    text-overflow ellipsis
    // white-space nowrap
    display -webkit-box
    -webkit-box-orient:vertical
    -webkit-line-clamp:2
    line-height 15px
  .price
    color #e4393c
    font-size 14px
  .fixbar
    height 50px
    position fixed
    bottom 0
    border-top 1px solid #e5e5e5
    background #fff
    width 100%
  .fixbar .icon
    position absolute
    margin-top 5px
  .fixbar .icon div
    margin-top 5px
    color #666
    font-size 10px
  .detail
    color #e4393c
    position absolute
    left 50px
    line-height 50px
    font-weight bold
  .hide
    display none
  .rightf
    position absolute
    right 0
  .rightf .check
    float right
    display: block
    width: 110px
    height: 50px
    margin-left: 10px
    line-height: 50px
    font-size: 16px
    text-align: center
    font-weight: 700
    background: #e4393c
    color: #fff
  .rightf .total
    float left
    line-height: 50px
    font-size: 16px
    font-weight: 700
  .total i
    color #e4393c
  .fix
    float right
    width 107px
    display inline-block
    font-size 16px
    // border 1px solid #ccc
    overflow: hidden
    background-color: #f7f7f7
  .fix input
    width 45px
    border-left: 1px solid #fff;
    border-right: 1px solid #fff;
    float left
    font-size 12px
    background: #f7f7f7
    line-height 30px
    text-align center
    color #999
  .add
    position: relative
    float: left
    width: 30px
    height: 30px
    line-height: 30px
    text-align: center
  .add:after
    position: absolute
    left: 50%
    top: 50%
    content: ""
    display: block
    width: 16px
    height: 1px
    margin: -1px 0 0 -8px
    background: #999
    border-radius: 1px
  .desc
    position: relative
    float: left
    width: 30px
    height: 30px
    line-height: 30px
    text-align: center
  .desc:before
    position: absolute
    left: 50%
    top: 50%
    content: ""
    display: block
    width: 16px
    height: 2px
    margin: -1px 0 0 -8px
    background: #999
    border-radius: 1px
    width: 1px;
    height: 16px;
    margin: -8px 0 0 -1px;
    border-radius: 1px;
  .desc:after
    position: absolute
    left: 50%
    top: 50%
    content: ""
    display: block
    width: 16px
    height: 1px
    margin: -1px 0 0 -8px
    background: #999
    border-radius: 1px
</style>
